<template>
	<view v-loading="loading" class="action-list">
		<uni-list class="list">
			<uni-section :title="formatDate(time)" type="line" v-for="time in sortActionTimes" :key="time" class="action-group">
				<uni-list-item 
					v-for="action in actionList[time]"
					:key="action.id" 
					@click="handleClickAction(JSON.parse(JSON.stringify(action)))"
					clickable
					:showArrow="true">
					<template v-slot:body>
						<view class="action-col">
							<text>{{action.title}}</text>
							<view class="action-row">
								<uni-tag v-if="action.type==='report'" :text="$t(action.type)" type="primary" size="mini" />
								<uni-tag v-else-if="action.type==='document'" :text="$t(action.type)" size="mini" />
								<uni-tag v-else-if="action.type==='defect'" :text="$t(action.type)" type="error" size="mini" />
								<uni-tag v-else-if="action.type==='case'" :text="$t(action.type)" type="success" size="mini" />
								<uni-tag v-else-if="action.type==='plan'" :text="$t(action.type)" type="warning" size="mini" />
								<uni-tag v-else :text="$t(action.type)" />
								<text class="action-row-sub-title">{{ action.time }}</text>
								<text v-if="action.state" class="action-row-sub-title">({{ $t(action.state) }})</text>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-section>
		</uni-list>
	  </view>
</template>

<script>
	import { actionList } from "@/api/system/dashboard.js"
	import {strFormat} from "@/utils/index.js";
	/** 活动列表 */
	export default {
		name: "ActionList",
		components: { },
		data() {
		    return {
				// 是否显示加载状态
		        loading: false,
				// 活动数据列表
		        actionList: {},
				// 查询参数
				query: {
					type: '1'
				}
		    }
		},
		computed: {
		    /** 获取项目id */
		    projectId() {
		        return this.$store.state.user.config.currentProjectId;
		    },
			actionIcon: function() {
				return function(action) {
					return ''
				}
			},
			actionIntroduce: function() {
				return function(action) {
					return ''
				}
			},
			/** 获取活动时间集合 */
			actionTimes: function() {
				return Object.keys(this.actionList);
			},
			/** 格式化时间 */
			formatDate: function () {
			  return function (time) {
				const date = new Date(parseInt(time));
				return `${strFormat(this.$i18n.t('year-month-day'),date.getFullYear(), date.getMonth()+1, date.getDate())} ${this.$i18n.t('week'+date.getDay())}`
			  }
			},
			sortActionTimes() {
			  return Object.keys(this.actionList).sort(function(a,b){return parseInt(b)-parseInt(a)});
			},
		},
		methods: {
			/** 处理点击活动项 */
		    handleClickAction(action) {
				switch(action.type) {
					case 'defect':
						uni.navigateTo({
							url: '/subpackage/pages/system/defect/detail?defectId='+action.id
						});
						break;
				}
		    },
			/** 刷新列表 */
			refresh() {
			  this.loading = true;
			  actionList(this.projectId, this.query).then(res=>{
				this.loading = false;
				this.actionList = res.data.actions;
			  }).catch(e=>this.loading=false);
			},
		}
	}
</script>

<style lang="scss" scoped>
.action-list {
  position: relative;
  width: 100%;
  background-color: white;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .list {
	  width: 100%;
	  background-color: green;
  }
  .action-row-sub-title {
	  font-size: 0.8rem;
	  color: #909399;
  }
  .action-row {
	  display: inline-flex;
	  flex-direction: row;
	  align-items: center;
	  gap: 10rpx;
  }
  .action-col {
  	  display: inline-flex;
  	  flex-direction: column;
  	  gap: 10rpx;
  }
}
.action-group {
	width: 100%;
	margin-top: 10rpx;
	background-color: red;
}
</style>
